﻿import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.12
import QtMultimedia 5.14

Item {
    id: root
    readonly property real dp: config.dp
    property string title: ""
    property string name1: ""
    property string name2: ""
    property string name3: ""
    property string name4: ""
    property int onbt: 0
    width: 280*dp
    height: 80*dp

    onOnbtChanged: {
        if(onbt===1){
            btl1.colorGradient = false
            btl1.button_color = "#1B6BDA"
            btl2.gradientDirect = 0
            btl2.colorGradient = true
            btl2.button_color_2 = "#F2F8FF"
            btl2.button_color = "#FFFFFF"
            btl3.gradientDirect = 0
            btl3.colorGradient = true
            btl3.button_color_2 = "#F2F8FF"
            btl3.button_color = "#FFFFFF"
            btl4.gradientDirect = 0
            btl4.colorGradient = true
            btl4.button_color_2 = "#F2F8FF"
            btl4.button_color = "#FFFFFF"
        }else if(onbt===2){
            btl2.colorGradient = false
            btl2.button_color = "#1B6BDA"
            btl1.gradientDirect = 0
            btl1.colorGradient = true
            btl1.button_color_2 = "#F2F8FF"
            btl1.button_color = "#FFFFFF"
            btl3.gradientDirect = 0
            btl3.colorGradient = true
            btl3.button_color_2 = "#F2F8FF"
            btl3.button_color = "#FFFFFF"
            btl4.gradientDirect = 0
            btl4.colorGradient = true
            btl4.button_color_2 = "#F2F8FF"
            btl4.button_color = "#FFFFFF"
        }else if(onbt===3){
            btl3.colorGradient = false
            btl3.button_color = "#1B6BDA"
            btl1.gradientDirect = 0
            btl1.colorGradient = true
            btl1.button_color_2 = "#F2F8FF"
            btl1.button_color = "#FFFFFF"
            btl2.gradientDirect = 0
            btl2.colorGradient = true
            btl2.button_color_2 = "#F2F8FF"
            btl2.button_color = "#FFFFFF"
            btl4.gradientDirect = 0
            btl4.colorGradient = true
            btl4.button_color_2 = "#F2F8FF"
            btl4.button_color = "#FFFFFF"
        }else if(onbt===4){
            btl4.colorGradient = false
            btl4.button_color = "#1B6BDA"
            btl1.gradientDirect = 0
            btl1.colorGradient = true
            btl1.button_color_2 = "#F2F8FF"
            btl1.button_color = "#FFFFFF"
            btl2.gradientDirect = 0
            btl2.colorGradient = true
            btl2.button_color_2 = "#F2F8FF"
            btl2.button_color = "#FFFFFF"
            btl3.gradientDirect = 0
            btl3.colorGradient = true
            btl3.button_color_2 = "#F2F8FF"
            btl3.button_color = "#FFFFFF"
        }
    }

    Component.onCompleted: {
        btl1.gradientDirect = 0
        btl1.colorGradient = true
        btl1.button_color_2 = "#F2F8FF"
        btl1.button_color = "#FFFFFF"
        btl2.gradientDirect = 0
        btl2.colorGradient = true
        btl2.button_color_2 = "#F2F8FF"
        btl2.button_color = "#FFFFFF"
        btl3.gradientDirect = 0
        btl3.colorGradient = true
        btl3.button_color_2 = "#F2F8FF"
        btl3.button_color = "#FFFFFF"
        btl4.gradientDirect = 0
        btl4.colorGradient = true
        btl4.button_color_2 = "#F2F8FF"
        btl4.button_color = "#FFFFFF"
    }

    // 边框
    Rectangle {
        anchors.fill: parent
        radius: 8
        border.color: "#1677FF"
        border.width: 1
        color: "transparent"
        z: 10
    }

    // 内容区域
    Item {
        id: contentArea
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: parent.bottom
        }

        // 顶部标题区域
        Rectangle{
            x:0*dp
            y:0*dp
            width: contentArea.width
            height: contentArea.height*3/8
            color: "#E1E1E1"

            Text {
                text: title
                font.pixelSize: 15
                anchors.centerIn: parent
                color: "#222222"
            }
        }

        // 水平分隔线
        Rectangle{
            x:0*dp
            y:contentArea.height*3/8
            width: contentArea.width
            height: 1*dp
            color: "#1677FF"
            z:10
        }

        // 垂直分隔线
        Rectangle{
            x:contentArea.width/4-0.5*dp
            y:contentArea.height*3/8
            width: 1*dp
            height: contentArea.height*5/8
            color: "#1677FF"
            z:10
        }
        // 垂直分隔线
        Rectangle{
            x:contentArea.width/4*2-0.5*dp
            y:contentArea.height*3/8
            width: 1*dp
            height: contentArea.height*5/8
            color: "#1677FF"
            z:10
        }
        // 垂直分隔线
        Rectangle{
            x:contentArea.width/4*3-0.5*dp
            y:contentArea.height*3/8
            width: 1*dp
            height: contentArea.height*5/8
            color: "#1677FF"
            z:10
        }

        // 左侧按钮
        CustomButton{
            id:btl1
            title: name1
            x:0*dp
            y:contentArea.height*3/8
            width: contentArea.width/4
            height: contentArea.height*5/8
            button_color:onbt===1?"#1677FF":"white"
            radius: 0
            onReleased: {
                bt1()
                onbt=1
            }
        }

        // 中侧按钮
        CustomButton{
            id:btl2
            title: name2
            x:contentArea.width/4
            y:contentArea.height*3/8
            width: contentArea.width/4
            height: contentArea.height*5/8
            button_color:onbt===2?"#1677FF":"white"
            radius: 0
            onReleased: {
                bt2()
                onbt=2
            }
        }
        // 中侧按钮
        CustomButton{
            id:btl3
            title: name3
            x:contentArea.width/4*2
            y:contentArea.height*3/8
            width: contentArea.width/4
            height: contentArea.height*5/8
            button_color:onbt===3?"#1677FF":"white"
            radius: 0
            onReleased: {
                bt3()
                onbt=3
            }
        }
        // 右侧按钮
        CustomButton{
            id:btl4
            title: name4
            x:contentArea.width/4*3
            y:contentArea.height*3/8
            width: contentArea.width/4
            height: contentArea.height*5/8
            button_color:onbt===4?"#1677FF":"white"
            radius: 0
            onReleased: {
                bt4()
                onbt=4
            }
        }
    }

    signal bt1()
    signal bt2()
    signal bt3()
    signal bt4()
}
